<template>
    <div class="person">
        <h1>情况一：监视ref定义的基本数据类型</h1>
        <h2>当前求和为：{{ sum }}</h2>
        <button @click="changeSum">点我sum加1</button>
    </div>
</template>



<script lang="ts" setup name="Person">
    // import {ref,reactive} from 'vue'
    import {ref, watch} from 'vue'
    //数据
    let sum=ref(0)

    //方法
    function changeSum(){
        sum.value+=1
    }

    //监视

    const stopWatch=watch(sum,(newValue,oldValue)=>{
        console.log('sum变化了',newValue,oldValue)
        if (newValue>=10){
            stopWatch()
        }
    })

</script>






<style scoped>
    .person {
        background-color: aqua;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button {
        margin: 0 5px;
    }
</style>